<template>
    <view>
        <view class="list" v-for="(item,index) in list" :key="index" :class="{listqr:item.b_type==1}" @click="jumpDetails(item)">
            <view class="list_top">
                <view>发起单位：{{item.unit}}</view>


                <view v-if="item.b_type==1" class="badge-status-1"> {{item.is_submit > 0 ? 1 : 0}}/1</view>
                <view v-if="item.b_type==2" class="badge-status-2"> {{item.day}}/{{item.days}}</view>


            </view>
            <view class="list_title">{{item.b_title}}
                <text v-if="item.is_yuqi">有逾期</text>
            </view>
            <view class="paratext">{{item.subtitle}}</view>

<!--            -->
<!--            <block v-if="item.status == 2">-->
<!--                -->
<!--            </block>-->
<!--            <block v-else>-->
<!--                -->
<!--            </block>-->
<!--            -->
            <view class="time" v-if="item.b_type==2 && item.status != 2">
                <u-icon v-if="item.is_daka" class="u-icons" name="checkmark-circle-fill" color="#0FBC77" size="35"></u-icon>
                <u-icon v-else class="u-icons" name="checkmark-circle-fill" color="#E1E1E1" size="35"></u-icon>
                <text >本次任务时间:{{item.daka}}</text>
            </view>
            <view class="cycle">
                <view v-if="item.b_type==2">任务周期：{{item.start_time}} ~ {{item.end_time}}</view>
                <view v-else>截止时间:{{item.end_time_datetime}}</view>
                <view>ID:{{item.code}}</view>
            </view>
            <image v-if="item.status == 2" class="finish" src="https://txr001.zthj.net/voucher_img/finish.png"></image>
        </view>
    </view>
</template>

<script>
export default {
    name:'list',
    props:{
        list:{
            type:Array,
            default:[],
        }
    },
    data() {
        return {

        }
    },
    onLoad() {

    },
    mounted() {

    },
    methods: {
        //跳转详情
        jumpDetails(row){
            this.$emit("jumpDetails",row)
        },
    }
}
</script>

<style lang="less" scoped>
.list{
    padding: 0 32rpx;
    background: #FFFFFF;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    margin-bottom: 32rpx;
    position: relative;
    overflow: hidden;
    &:before{
        content: "";
        position: absolute;
        left: 0;
        width: 8rpx;
        height: 100%;
        background-color: #0FBC77;
        top: 0;
        bottom: 0;
    }
    .list_top{
        padding-top: 32rpx;
        padding-bottom: 14rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
            &:first-child{
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                color: #010101;
                line-height: 28rpx;
            }
            &:last-child{
                padding: 0 8rpx;
                min-width: 62rpx;
                line-height: 32rpx;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                text-align: center;
            }
        }
    }
    .list_title{
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #010101;
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;
        line-height: 44rpx;
        text{
            display: inline-block;
            vertical-align: middle;
            min-width: 72rpx;
            line-height: 32rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            border: 2rpx solid #EC6969;
            text-align: center;
            padding: 0 6rpx;
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #EC6969;
            margin-left: 16rpx;
        }
    }
    .paratext{
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #767879;
        line-height: 28rpx;
        margin-bottom: 24rpx;
		z-index: 999;
    }
    .time{
        line-height: 42rpx;
        padding: 0 16rpx;
        background: rgba(15,188,119,0.08);
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        border: 1rpx solid #0FBC77;
        display: inline-flex;
        align-items: center;
        margin-bottom: 26rpx;
        .u-icons{
            display: inherit;
        }
        text{
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #010101;
            margin-left: 6rpx;
        }
    }
    .cycle{
        padding-top: 24rpx;
        padding-bottom: 32rpx;
        border-top: 2rpx solid #D9D9D9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #767879;
            line-height: 28rpx;
        }
    }
    .finish{
        position: absolute;
        width: 104rpx;
        height: 104rpx;
        right: 0;
        bottom: 82rpx;
		z-index: 0;
    }
}
.listqr{
    &:before{
        content: "";
        position: absolute;
        left: 0;
        width: 8rpx;
        height: 100%;
        background-color: #5367FA;
        top: 0;
        bottom: 0;
    }
    .list_top{
        view{
            &:last-child{
                padding: 0 8rpx;
                min-width: 62rpx;
                line-height: 32rpx;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC;

                text-align: center;
            }
        }
    }
}
.badge-status-1{
    color:#fff;
    background: #5367FA;
}
.badge-status-2{
    color:#fff;
    background: #0FBC77;
}
</style>